<template>
  <div id="page-home">
    <!-- top 栏 -->
    <top-nav>
      <template #slotTab>
        <div class="NavTab">
          <!-- /home/admin-index v-if="item.link === '/home/admin-index' && role === 'ADMIN'"-->
          <template v-for="(item, index) in tabArr">
            <router-link
              v-if="
                item.link === '/home/admin-index'
                  ? role === 'ADMIN'
                    ? true
                    : false
                  : true
              "
              :to="item.link"
              :class="index === currentTab ? 'active' : ''"
              @click.native="tabClick(index)"
              class="tab"
            >
              <div
                v-if="(item.link === '/home/message')"
                style="margin-right: 20px;"
              >
                <el-divider direction="vertical"></el-divider>
              </div>

              <div v-if="(item.type === 'logout')">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <van-icon name="setting-o" style="cursor: pointer;" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-switch-button">
                      <a href="#" @click="logout">
                        退出登录
                      </a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <van-icon :name="item.icon" />
              {{ item.title }}
            </router-link>
          </template>
        </div>
      </template>
    </top-nav>
    <!-- 侧边栏 -->
    <div class="home-body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import TopNav from './TopNav/TopNav.vue'
import { isNull } from '@/utils/tool'
export default {
  components: {
    TopNav,
  },
  data() {
    return {
      role: '',
      // 存储路径
      fullpath: '',
      // Tab 对象数组
      tabArr: [
        { link: '/home', title: '首页', icon: 'wap-home-o' },
        { link: '/home/upload', title: '上报', icon: 'back-top' },
        { link: '/home/admin-index', title: '系统管理', icon: 'todo-list-o' },
        { link: '/home/user', title: '个人中心', icon: 'user-o' },
        { link: '/home/message', title: '', icon: 'envelop-o' },
        { link: '', title: '', icon: '', type: 'logout' },
        { link: '/home/community', title: '', icon: 'edit' },
      ],
      // 当前变色的组件
      currentTab: 0,
      isCollapse: true,
    }
  },
  methods: {
    // 获取路径
    getPath() {
      this.fullpath = this.$route.fullPath
    },
    // 让当前显示界面对应 tab 变色
    tabClick(index) {
      this.currentTab = index
    },
    // 退出登录操作
    logout() {
      this.$store
        .dispatch('LOGOUT')
        .then(() => {
          this.$router.push('/login')
        })
        .catch((err) => {
          console.log(err)
        })
    },
    searchPath(path) {
      return this.tabArr.some((kid, i) => {
        if (kid.link.search(path) !== -1) {
          this.tabClick(i)
          return true
        }
      })
    },
  },
  watch: {
    $route() {
      this.getPath()
    },
  },
  created() {
    // console.log(this.$store.state.user.roles)
    this.role = this.$store.state.user.roles
    this.getPath()
    this.tabArr.some((item, index) => {
      let searchWord = item.link
      let pattern = new RegExp(searchWord, 'gi')
      let result = this.fullpath.match(pattern)
      if (isNull(result)) {
        if (this.fullpath.search('/admin-index') !== -1) {
          return this.searchPath('/admin-index')
        } else if (this.fullpath === '/home') {
          return this.searchPath('/home')
          // return true
        } else {
          this.tabClick(index)
          return true
        }
      }
    })
  },
  mounted() {},
}
</script>

<style lang="less" scoped>
.active {
  color: #1989fa !important;
}
#page-home {
  background-color: #f3f7f9;
  .NavTab {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    height: 100%;
    .tab {
      margin: 0 0.6rem;
      color: #333;
      display: flex;
      align-items: center;
      &:hover {
        color: #1989fa;
      }
    }
    .van-icon {
      margin-right: 0.2rem;
      font-size: 1.2rem;
      &:hover {
        color: #1989fa;
      }
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .home-body {
    position: relative;
    margin: 0 auto;
    width: 62.5rem;
  }
}
</style>
